<template>
  <div class="container">
    <div class="chart">
      <div id="data-engine-spot-pie" style="width: 100%"></div>
    </div>
  </div>
</template>
<script>
import Highcharts from "highcharts/highstock";
export default {
  created() {
    setTimeout(() => {
      Highcharts.chart("data-engine-spot-pie", {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
          backgroundColor: "#0000",
        },
        title: {
          text: "",
          style: {
            color: "#2099D3",
          },
        },
        tooltip: {
          // pointFormat: "占比: <b>{point.percentage:.1f}%</b>",
          formatter: function () {
            return (
              "<b>" +
              this.point.name +
              "</b>: " +
              Highcharts.numberFormat(this.percentage, 1) +
              "% (" +
              Highcharts.numberFormat(this.y, 0, ",") +
              " )"
            );
          },
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              style: {
                color: "#000",
                fontWeight:'300',
                fontSize:'16px',
              },
              formatter: function () {
                return (
                  "<span>" +
                  this.point.name +
                  "</span>: " +
                  Highcharts.numberFormat(this.percentage, 1) +
                  "% (" +
                  Highcharts.numberFormat(this.y, 0, ",") +
                  " )"
                );
              },
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: "Brands",
            colorByPoint: true,
            data: [...this.getPieData()],
          },
        ],
      });
    }, 0);
  },
  data() {
    return {
      tableData: [
        {
          Id: 1,
          t001: "大车",
          t002: 12,
        },
        {
          Id: 2,
          t001: "主小车",
          t002: 10,
        },
        {
          Id: 3,
          t001: "副小车",
          t002: 0,
        },
        {
          Id: 4,
          t001: "主起升",
          t002: 21,
        },
        {
          Id: 5,
          t001: "副起升",
          t002: 2,
        },
        {
          Id: 6,
          t001: "其他",
          t002: 6,
        },
      ],
    };
  },
  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      console.log("调用行样式");
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    getPieData() {
      const data = [];
      for (const item of this.tableData) {
        data.push({
          name: `<b style='color:grey'>${item.t001}</b>`,
          y: item.t002,
        });
      }
      return data;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  .chart {
    margin-bottom: 20px;
  }
}
</style>